<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue'
  import password from './components/password.vue'
  import mobile from './components/mobile.vue'
  import request from '@/utils/request'
  import { loginByWXAPI } from '@/api/user'

  const titleList = [
    { title: '密码登录', subTitle: '验证码登录' },
    { title: '验证码登录', subTitle: '密码登录' },
  ]

  const tabIndex = ref(0)

  const titleMeta = computed(() => {
    return titleList[tabIndex.value]
  })

  const onWeiXinLogin = async (e: UniHelper.ButtonOnGetphonenumberEvent) => {
    // console.log('e  ----->  ', e.detail.iv)
    // console.log('e  ----->  ', e.detail.encryptedData)

    const { code } = await uni.login()

    const res = await loginByWXAPI({ iv: e.detail.iv, encryptedData: e.detail.encryptedData, code })
    console.log('  ----->  ', res)
  }

  onMounted(() => {
    ;(window as any).QC.Login({
      btnId: 'qqBtn', //插入按钮的节点id
    })
  })
</script>
<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ titleMeta.title }}</view>
      <view class="type" @click="tabIndex = tabIndex ? 0 : 1">
        <text>{{ titleMeta.subTitle }}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>

    <password v-if="tabIndex === 0" />
    <mobile v-else />
  </view>
  <!-- 社交账号登录 -->

  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>

    <!-- 1.  -->

    <!-- #ifdef MP-WEIXIN -->
    <button
      type="primary"
      open-type="getPhoneNumber"
      @getphonenumber="onWeiXinLogin"
      style="color: #ffffff; background-color: #16c2a3; border-color: #1aad19"
    >
      手机号快捷登录
    </button>
    <!-- #endif -->

    <view id="qqBtn"></view>
    <!-- #ifndef MP-WEIXIN -->
    <view class="social-account">
      <a
        class="icon"
        href="https://graph.qq.com/oauth2.0/authorize?client_id=100522525&response_type=token&scope=all&redirect_uri=https%3A%2F%2Fsegmentfault.com%2Fuser%2Foauth%2Fqq"
      >
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </a>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<style lang="scss">
  @import './login.scss';
</style>
